<template>
  <div class="box">
    <div class="box-con">
      <div class="box-leftt">
        <div v-for="(item, index) in crj" :key="index">
          <h3 style="margin-left: 10px; text-align: left">
            <i class="el-icon-folder-opened"></i>{{ item.category.name }}
          </h3>
          <div class="datuk">
            <img :src="item.titleImage" alt="" />
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
            <div class="ererk">
              <div v-for="(item, index) in item.tags" :key="index" class="yier">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-tou">
          <img :src="cxk.avatar" alt="" />
          <h3>{{ cxk.author }}</h3>
          <p>{{ cxk.introduction }}</p>
        </div>
        <div class="biaoqian">
          <h3 class="qianzi">标签</h3>
          <div style="width: 90%; margin: 0 auto">
            <div
              style="display: inline-block"
              v-for="(item, index) in biaoqian"
              :key="index"
              class="bianqianzi"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box-xia">
      <div class="box-xia-com">
        <div>
          © 2023
          <span>Weblog™.</span>
          All Rights Reserved.
        </div>
        <div>Provided by <span>犬小哈</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categoryId: "",
      current: 1,
      size: 10,
      crj: [],
      cxk: [],
      biaoqian: [],
    };
  },
  created() {
    this.categoryId = this.$route.query.categoryId;
    if (this.categoryId) {
      this.getFen(this.categoryId);
      console.log(this.categoryId);
    } else {
      console.log("出错了");
    }
    this.getAdd();
    this.getBiao();
  },
  methods: {
    async getBiao() {
      let res = await this.$axios.post(
        "http://47.104.167.34:9110/api/tag/list"
      );
      console.log(res);
      this.biaoqian = res.data.data;
    },
    async getFen(categoryId) {
      let res = await this.$axios.post(
        "http://47.104.167.34:9110/api/category/article/list",
        {
          categoryId: categoryId,
          current: 1,
          size: 10,
        }
      );
      console.log(res);
      this.crj = res.data.data;
      console.log(this.crj);
    },
    async getAdd() {
      let res = await this.$axios.post(
        "http://47.104.167.34:9110/api/blog/setting/detail"
      );
      // console.log(res);
      this.cxk = res.data.data;
    },
  },
};
</script>

<style>
@import "./shouye.css";

* {
  margin: 0;
  padding: 0;
}

.box {
  /* margin-top: 20rem; */
  background-color: #f4f4f4;
  width: 100%;
  /* height: 100vh; */
  margin-top: 4.625rem;
}

.box-con {
  width: 80%;
  padding-top: 1.25rem;
  margin: 0 auto;
  display: flex;
  /* justify-content: space-between;
   */
  justify-content: flex-start;
}

.box-leftt {
  width: 64.125rem;
  /* height: 106.25rem; */
  height: 20.625rem;

  display: flex;
  /* justify-content: space-around; */
  align-content: space-between;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
}
.datuk {
  width: 27rem;
  /* height: 20rem; */
  background-color: #fff;
  text-align: left;
  border-radius: 0.375rem;
  padding-bottom: 0.625rem;
  /* display: inline-block; */
}

.datuk img {
  width: 100%;
  height: 12.5rem;
}

.datuk h3 {
  margin: 1.25rem 0 1.25rem 1.25rem;
}

.datuk p {
  margin-left: 1.25rem;
  color: #6b7280;
}
.ererk {
  display: flex;
  /* width: 3.75rem; */
}
.yier {
  background-color: #20c8574a;
  padding: 0.375rem;
  border-radius: 0.375rem;
  margin-left: 1.25rem;
  /* margin-top: 1.25rem; */
  /* display: inline-block; */
}
</style>